<template>
    <div class="summarize">
        <HomeSummarizeTechnology :scroll="technologyScroll"></HomeSummarizeTechnology>
        <HomeSummarizeSales :scroll="salesScroll"></HomeSummarizeSales>
        <HomeSummarizeAdvantage></HomeSummarizeAdvantage>
    </div>
</template>
<script>
export default {
    name: "HomeSummarize",
    props: {
        scroll: { type: Number, default: 0 }, screenHeight: { type: Number, default: 0 }
    },
    data () {
        return {
            offsetTop: 0,
            clientHeight: 0,
            advantageHeight: 0,
            technologyHeight: 0
        }
    },
    watch: {
        scroll (v) {
            this.doAnimation()
        },
    },
    computed: {
        threshold () {
            let height = this.screenHeight || 0;
            return this.offsetTop - height + 78;
        },
        thresholdBg () {
            let domHeight = this.dom.technology.clientHeight + this.dom.sales.clientHeight;
            return this.threshold + domHeight;
        },
        technologyScroll () {
            return Math.max(this.scroll - this.threshold, 0)
        },
        salesScroll () {
            return Math.max(this.scroll - this.threshold - this.technologyHeight, 0)
        }
    },
    methods: {
        doAnimation (scroll = this.scroll) {
            let diff_scroll = Math.max(scroll - this.thresholdBg, 0);
            let color_rate = this.$getRate(diff_scroll, 0, this.advantageHeight)
            let color = 255 * color_rate;
            this.dom.summarize.style.backgroundColor = `rgb(${color},${color},${color})`
        },
        getDoms () {
            let summarize = document.querySelector('.summarize');
            let technology = document.querySelector('.technology');
            let sales = document.querySelector('.sales');
            let advantage = document.querySelector('.advantage');
            this.dom = { summarize, technology, sales, advantage };
            this.offsetTop = summarize.offsetTop;
            this.clientHeight = summarize.clientHeight;
            this.advantageHeight = advantage.clientHeight;
            this.technologyHeight = technology.clientHeight;
        }
    },
    mounted () {
        this.$on('global:homeResize', this.getDoms);
        this.getDoms()
    }
}
</script>
<style scoped lang="scss">
.summarize::v-deep {
    --scale: 1;
    background-color: #000000;
    .technology,
    .sales,
    .advantage {
        transition: transform 0.3s;
        transform: scale(var(--scale));
    }
}
</style>